<!-- Defining header  -->

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import="com.metagurukul.informer.valueObjects.*,java.util.*,com.metagurukul.informer.dao.*,com.metagurukul.informer.utility.*"%>

<!DOCTYPE html>
<head>

<title>MetaInformer</title>

<!-- Including the required css -->
	<link rel="stylesheet" href="css/button.css" media="screen" />    
	<link rel="shortcut icon" href="images/favicon.ico"> 
	<link rel="stylesheet" type="text/css" href="css/style.css" /><style>._css3m{display:none}</style>
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
	 <link rel="StyleSheet" href="css/menu.css">
  	<script language="javascript" src="js/menu.js"></script>

	<style>._css3m{display:none}</style>

<!-- Including the required javascripts -->
	<script src="js/jquery-1.8.2.js"></script>
	<script src="js/validation.js"></script>
	<script type="text/javascript" src="js/jscriptForTextArea/tiny_mce.js"></script>

<!-- Script for tiny MCE editor -->
	<script type="text/javascript">
		tinyMCE.init({
			mode : "textareas",
			theme : "simple"
		});
	</script>

<!-- CSS for the autocomplete suggestion list-->
	<style type="text/css">
		body {
		font-family: Helvetica;
		font-size: 13px;
		color: #000;
		}
		h3 {
		margin: 0px;
		padding: 0px;
		}
		.suggestionsBox {
		position: relative;
		//left: 260px;
		margin: 0px 0px 0px 0px;
		width: 200px;
		background-color: #F9F8F6;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;
		//color: #fff;
		}
		.suggestionList {
		margin: 0px;
		padding: 0px;
		}
		.suggestionList li {
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
		}
		.suggestionList li:hover {
		background-color: #FEFADF;
		border: 1px solid #E5FA05;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		}
	</style>

<!-- Script for the autocomplete suggestion list -->
	<script type="text/javascript">
	if(typeof String.prototype.trim !== 'function') 
	{ 
	String.prototype.trim = function() 
	{ 
	return this.replace(/^\s+|\s+$/g, ''); 
	} 
	} 
		function lookup(inputString) {
			if(inputString.length == 0) {
				$('#suggestions').hide();
			}else {
			 if(inputString.lastIndexOf(",")>0){
			  	if(inputString.substring(inputString.lastIndexOf(",")+1).length>0){
					$.post("AutoCompleteTags", {queryString: ""+inputString.substring(inputString.lastIndexOf(",")+1)+""}, function(data){
					if(data.trim().length >0) {
						document.getElementById("suggestions").style.zIndex=1;
						document.getElementById("suggestions").style.display=inline;
						//$('#suggestions').show();
						$('#autoSuggestionsList').html(data);
					}
					});
				}
			 }
			 else{
				$.post("AutoCompleteTags", {queryString: ""+inputString+""}, function(data){
					if(data.trim().length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
					}
					});
				}
			}
		}
		
		function go(aa){
			var text=document.getElementById("inputString").value;
			if(text.length==0){
				$('#inputString').val(aa);
			}	
			else{
			   if(text.indexOf(aa)>=0){
			   	return;
			   }
			   var index=0;
			   if((index=text.lastIndexOf(","))<0){
			   	  index=0;
			   }
			   if(index!=0)index++;
			   $('#inputString').val(text.substring(0,index)+aa);
			}
			 	
			setTimeout("$('#suggestions').hide();", 200);
		}
		
		function fill() {
			setTimeout("$('#suggestions').hide();", 200);
		}
		
		function methodToFixLayout(){
			var winW = 630, winH = 460;
			if (document.body && document.body.offsetWidth) {
			 winW = document.body.offsetWidth;
			 winH = document.body.offsetHeight;
			}
			if (document.compatMode=='CSS1Compat' &&
			    document.documentElement &&
			    document.documentElement.offsetWidth ) {
			 winW = document.documentElement.offsetWidth;
			 winH = document.documentElement.offsetHeight;
			}
			if (window.innerWidth && window.innerHeight) {
			 winW = window.innerWidth;
			 winH = window.innerHeight;
			}
			divH=winH-170;
			divH=divH+"px";
			if (navigator.appName == 'Microsoft Internet Explorer')
			{
				document.getElementById("setheight").style.height=divH;
				
			}
		    document.getElementById("setheight").style.minHeight=divH;
		    
		}
		
		function load(){
			$(window).bind("resize", methodToFixLayout);
			methodToFixLayout();
		}
		/*function onstart(){
			if (navigator.appName == 'Microsoft Internet Explorer')
			{
				document.getElementById("setheight").style.height=600px;
			}	
		}*/
		
</script>		<!-- End of the script -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link href="css/css.css" media="screen" rel="stylesheet" type="text/css" >
</head>

<!-- Starting body tag -->
	<body onLoad="load();setCurrentMenu()" >
	<div style="width: 100%;" align="center"> 
		<div class="b-search" >
			<form method="post" action="Search" id="search-form" onsubmit="return searchValidate()">
				<div class="menudiv">
				  	<%
						if(session.getAttribute("name")!=null){
						String user=session.getAttribute("name").toString();
				 	 %>
				 	<table class="navbar" align="right" style="margin-left: 10px;">
					    <tr>
					      <td class="menuNormal" width="160"  onmouseover="expand(this, 'menu1');" 
					      onmouseout="collapse(this,'menu1');">
					        <p align="center"><%
							if(user!=null){
							out.write(user);
							} 
					 	%></p>
					        <div class="menuNormal" id="menu1" width="155">
					          <table class="menu" width="155">
					            <tr><td class="menuNormal" align="center">
					              <a href="ResetPassword.jsp" class="menuitem">Change Password</a>
					            </td></tr>
					            <tr><td class="menuNormal" align="center">
					              <a href="LogoutUser" class="menuitem">Log Out</a>
					            </td></tr>
					            
					          </table>
					        </div>
					      </td>
						</tr>
					  </table>
					 <%
						} else { 
					 %>
					 <a href="login.jsp" style="width:86px;height:18px;line-height:18px;">
						Log In
					 </a>  |
					 <%
						} 
					 %> 
					
					<a href="contactUs.jsp" style="width:87px;height:18px;line-height:18px;">Contact Us</a>  |
					<a href="aboutUs.jsp" style="width:86px;height:18px;line-height:18px;">About Us</a>
					<input type="text" name="query" id="query" maxlength="140" value="" placeholder="Search" class="inp-text">
				</div>
			</form>
		</div>
		<div align="center" class="main-header" >
			<div class="b-header" style="float:left;">
			<a id="nav-questions" href="ShowQuestions" style="text-decoration: none;">
			  <img src="images/question-mark.png" height="65" style="margin-top:-2px;"/>
			  <img src="images/logo.png" style="height:50px;margin-left:3px;margin-top:-2px;" id="logo"/>
			  <img src="images/website_informer_logo.png" style="margin-left:-3px;height:35px;"/>
			  </a>
			  <div style="width:380px;height:2px;background:#0093E7;margin-top:0px;background-repeat:repeat;clear:both;">  
	    	  </div>
			</div>
			<div class="b-header1" style="float:left;">
	           <ul>
	               <li id="1" ><a id="nav-questions" href="ShowQuestions">Questions</a></li>
	               <li id="2" ><a  id="nav-tags" href="ShowTags">Tags</a></li>
	               <li id="3" ><a  id="nav-unanswered" href="Unanswered">Unanswered</a></li>
	               <li id="4" style="text-align: right;"><a  id="nav-askquestion"  href="AskQuestion.jsp">Post Question</a></li>
	            </ul> 
			</div>
		</div>
		<div style="width:80%;margin-top:110px;position: relative;" align="left" id="setheight">